<template>
  <a-modal
    title="手工维护"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="cardBlackListAddVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="风险类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['riskType',{rules: [{ required: true, message: '必填' }]}]">
              <a-select-option key="11">盗用虚拟账户（嫌疑人信息）</a-select-option>
              <a-select-option key="99">其他</a-select-option>
              <a-select-option key="01">虚假申请（受害人信息）</a-select-option>
              <a-select-option key="12">套现、积分（嫌疑人信息）</a-select-option>
              <a-select-option key="02">虚假申请（嫌疑人信息）</a-select-option>
              <a-select-option key="13">协助转移赃款</a-select-option>
              <a-select-option key="03">伪卡（受害人信息）</a-select-option>
              <a-select-option key="14">买卖或租借银行（支付）账户</a-select-option>
              <a-select-option key="04">失窃卡（受害人信息）</a-select-option>
              <a-select-option key="15">专案风险信息</a-select-option>
              <a-select-option key="05">未达卡（受害人信息）</a-select-option>
              <a-select-option key="06">银行卡转移（受害人信息）</a-select-option>
              <a-select-option key="17">买卖银行卡信息</a-select-option>
              <a-select-option key="07">盗用银行卡（嫌疑人信息）</a-select-option>
              <a-select-option key="08">银行卡网络欺诈（受害人信息）</a-select-option>
              <a-select-option key="09">银行卡网络欺诈（嫌疑人信息）</a-select-option>
              <a-select-option key="10">虚拟账户被盗（受害人信息）</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="风险事件发生渠道"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['riskOccurChannel']">
              <a-select-option key="01">线上</a-select-option>
              <a-select-option key="02">线下</a-select-option>
              <a-select-option key="03">线上兼线下</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="银行帐/卡号"
                       v-bind="formItemLayout">
            <a-input v-decorator="['acctNo',{rules: [{ required: true, validator: acctNoValidator}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='开户行'
                       v-bind="formItemLayout">
            <a-input v-decorator="['acctOpenBankNo',{rules:[{validator: acctOpenBankNoValidator}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="客户姓名"
                       v-bind="formItemLayout">
            <a-input v-decorator="['customerName', {rules: [{required: true, validator:nameValidtor}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='身份证件号码'
                       v-bind="formItemLayout">
            <a-input v-decorator="['idCardNo',{rules: [{required: true,validator: idCardNoValidator}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="风险事件时间"
                       v-bind="formItemLayout">
            <a-range-picker
              format="YYYY-MM-DD" v-decorator="['riskDate']"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-item label="风险事件发生地域(省/市)"
                       :label-col="{span: 4}"
                       :wrapper-col="{span: 20}">
            <a-select
              show-search
              placeholder="省"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectProvince"
              v-decorator="['termAddrPrvnc',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="d in provinceData" :key="d.name">
                {{d.name}}
              </a-select-option>
            </a-select>
            <a-select
              show-search
              placeholder="市"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectCity"
              v-decorator="['termAddrCity',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in cityData" :key="d.name">
                {{d.name}}
              </a-select-option>
            </a-select>

          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'BlackListAdd',
    props: {
      cardBlackListAddVisiable: {
        default: false
      },
      instId: '',
    },
    data() {
      return {
        loading: false,
        formItemLayout,
        provinceData: [],
        cityData: [],
        form: this.$form.createForm(this),
        validateStatus: '',
        info: {
          infoName: '',
          remark: '',
          menuId: ''
        }
      }
    },
    computed: {
      show: {
        get: function () {
          return this.cardBlackListAddVisiable
        },
        set: function () {
        }
      }
    },
    methods: {
      idCardNoValidator(rule, value, callback) {
        if (!value) {
          callback(new Error('必填'))
        } else {
          callback(value ? (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) ? undefined : new Error('请输入正确的身份证格式')) : undefined)
        }
      },
      nameValidtor(rule, value, callback) {
        if (!value) {
          callback(new Error('必填'))
        } else {
          callback(value ? (/^[\u4E00-\u9FA5A-Za-z0-9_]{1,20}$/.test(value) ? undefined : new Error('请输入正确的客户姓名')) : undefined)
        }
      },

      acctNoValidator(rule, value, callback) {
        if (!value) {
          callback(new Error('必填'))
        } else {
          callback(value ? (/^\d{15}$/.test(value) ? undefined : new Error('请输入正确的卡号格式')) : undefined)
        }
      },
      acctOpenBankNoValidator(rule,value,callback){
        callback(value ? (/^[\u4E00-\u9FA5A-Za-z0-9_]{0,20}$/.test(value) ? undefined : new Error('请重新输入')) : undefined)
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      getMoment(value){
        return this.$moment(value).format('YYYY-MM-DD')
      },

      selectProvince() {
        this.provinceData = []
        this.cityData = []
        this.form.setFieldsValue({
          termAddrPrvnc: '',
          termAddrCity: '',
        })
        let l = '01'
        this.$get('/admin/merParam/regionInfo/select2', {l: l}).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.provinceData.push(r);
          })
        })
      },
      selectCity() {
        this.cityData = []
        this.form.setFieldsValue({
          termAddrCity: '',
        })
        let termAddrPrvnc = this.form.getFieldsValue(['termAddrPrvnc'])
        if (termAddrPrvnc.termAddrPrvnc) {
          let l = '02'
          let p = ''
          this.provinceData.forEach((val, index) => {
            if (val.name == termAddrPrvnc.termAddrPrvnc) return p = val.id
          })

          this.$get('/admin/merParam/regionInfo/select2', {l: l, p: p}).then((r) => {
            let result = r.data
            result.forEach(r => {
              this.cityData.push(r);
            })
          })
        }
      },


      reset() {
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setBrandFields()
            this.loading = true
            this.info.optFlag = 'add'
            this.info.instId = this.instId
            this.info.riskOccurArea = this.info.termAddrPrvnc + '/' + this.info.termAddrCity

            let riskDate = this.info.riskDate
            if (riskDate){
              this.info.riskOccurTimeBegin=this.getMoment(this.info.riskDate[0])
              this.info.riskOccurTimeEnd=this.getMoment(this.info.riskDate[1])
            }

            this.$post('/admin/merParam/cardBlackListInfo', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },

      setBrandFields() {
        let values = this.form.getFieldsValue(['riskType', 'riskOccurChannel', 'acctNo', 'acctOpenBankNo', 'customerName',
          'idCardNo', 'riskDate', 'termAddrPrvnc', 'termAddrCity'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.info[_key] = values[_key]
          })
        }
      }
    },

  }
</script>
